<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An enterprise-class UI design language and React-based implementation with a set of high-quality React components, one of best React UI library for enterprises">
    <title>Ant Design - A UI Design Language</title>
    <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/index-1.css"/>
    <link rel="stylesheet" type="text/css" href="/index-2.css"/>
    <style id="nprogress-style">
      #nprogress { display: none }
    </style>
    <link rel="stylesheet/less" type="text/css" href="/color.less"/>
    <script src="https://gw.alipayobjects.com/os/lib/??es6-shim/0.35.3/es6-sham.min.js,es6-shim/0.35.3/es6-shim.min.js"></script>
    <!--[if lte IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <script>
    if (!window.Intl) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
    }
    </script>
    <script>
    (function() {
      function isLocalStorageNameSupported() {
        var testKey = 'test';
        var storage = window.localStorage;
        try {
          storage.setItem(testKey, '1');
          storage.removeItem(testKey);
          return true;
        } catch (error) {
          return false;
        }
      }
      // 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
      var pathname = location.pathname;

      function isZhCN(pathname) {
        return /-cn\/?$/.test(pathname);
      }
      function getLocalizedPathname(path, zhCN) {
        var pathname = path.startsWith('/') ? path : '/' + path;
        if (!zhCN) { // to enUS
          return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
        } else if (pathname === '/') {
          return '/index-cn';
        } else if (pathname.endsWith('/')) {
          return pathname.replace(/\/$/, '-cn/');
        }
        return pathname + '-cn';
      }

      // 兼容旧的 URL， `?locale=...`
      var queryString = location.search;
      if (queryString) {
        var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
        if (isZhCNConfig && !isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
        }
      }

      // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
      if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
        var lang = (window.localStorage && localStorage.getItem('locale')) || ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
        // safari is 'zh-cn', while other browser is 'zh-CN';
        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
        }
      }
      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })()
    </script>
  </head>
  <body>
    <div id="react-content">
      <div class="page-wrapper"><header id="header" class="clearfix"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a id="logo" href="/index-cn"><img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/><img alt="Ant Design" src="https://gw.alipayobjects.com/zos/rmsportal/DkKNubTaaVsKURhcVGkh.svg"/></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div id="search-box"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i><input type="text" placeholder="在 ant.design 中搜索" class="ant-input"/></div><button type="button" class="ant-btn header-lang-button ant-btn-sm ant-btn-background-ghost"><span>English</span></button><div class="ant-select-sm version ant-select ant-select-enabled"><div class="ant-select-selection
            ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="ant-select-selection__rendered"><div class="ant-select-selection-selected-value" title="3.10.3" style="display:block;opacity:1">3.10.3</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none" unselectable="on"><i class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div><ul class="ant-menu menu-site ant-menu-light ant-menu-root ant-menu-horizontal" id="nav" role="menu"><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/index-cn"><span>首页</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/docs/spec/introduce-cn"><span>设计语言</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem"><a href="/docs/react/introduce-cn"><span>组件</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="http://pro.ant.design" class="header-link" target="_blank" rel="noopener noreferrer"><span>PRO</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="https://www.yuque.com/ant-design/course" class="header-link" target="_blank" rel="noopener noreferrer">教程<span style="display:inline-block;position:relative;top:-2px;width:6px;margin-left:8px"><span class="ant-badge ant-badge-not-a-wrapper"><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup></span></span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul></div></div></header><div class="main-wrapper"><div class="ant-row"><div class="main-menu ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4"><ul class="ant-menu aside-container menu-site ant-menu-light ant-menu-root ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/introduce-cn">Ant Design of React</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/getting-started-cn">快速上手</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/practical-projects-cn">项目实战</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/use-with-create-react-app-cn">在 create-react-app 中使用</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/use-in-typescript-cn">在 TypeScript 中使用</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/customize-theme-cn">定制主题</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/changelog-cn">更新日志</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/recommendation-cn">社区精选组件</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/i18n-cn">国际化</a></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem" style="padding-left:40px"><a href="/docs/react/faq-cn">FAQ</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/contributing-cn">贡献指南</a></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true"><h4>Components</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Components$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="General">General</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/button-cn/"><span>Button</span><span class="chinese">按钮</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/icon-cn/"><span>Icon</span><span class="chinese">图标</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Layout">Layout</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/grid-cn/"><span>Grid</span><span class="chinese">栅格</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/layout-cn/"><span>Layout</span><span class="chinese">布局</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Navigation">Navigation</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/affix-cn/"><span>Affix</span><span class="chinese">固钉</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/breadcrumb-cn/"><span>Breadcrumb</span><span class="chinese">面包屑</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/dropdown-cn/"><span>Dropdown</span><span class="chinese">下拉菜单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/menu-cn/"><span>Menu</span><span class="chinese">导航菜单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/pagination-cn/"><span>Pagination</span><span class="chinese">分页</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/steps-cn/"><span>Steps</span><span class="chinese">步骤条</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Data Entry">Data Entry</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/auto-complete-cn/"><span>AutoComplete</span><span class="chinese">自动完成</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/cascader-cn/"><span>Cascader</span><span class="chinese">级联选择</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/checkbox-cn/"><span>Checkbox</span><span class="chinese">多选框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/date-picker-cn/"><span>DatePicker</span><span class="chinese">日期选择框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/form-cn/"><span>Form</span><span class="chinese">表单</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/input-cn/"><span>Input</span><span class="chinese">输入框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/input-number-cn/"><span>InputNumber</span><span class="chinese">数字输入框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/mention-cn/"><span>Mention</span><span class="chinese">提及</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/rate-cn/"><span>Rate</span><span class="chinese">评分</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/radio-cn/"><span>Radio</span><span class="chinese">单选框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/select-cn/"><span>Select</span><span class="chinese">选择器</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/slider-cn/"><span>Slider</span><span class="chinese">滑动输入条</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/switch-cn/"><span>Switch</span><span class="chinese">开关</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tree-select-cn/"><span>TreeSelect</span><span class="chinese">树选择</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/time-picker-cn/"><span>TimePicker</span><span class="chinese">时间选择框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/transfer-cn/"><span>Transfer</span><span class="chinese">穿梭框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/upload-cn/"><span>Upload</span><span class="chinese">上传</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Data Display">Data Display</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/avatar-cn/"><span>Avatar</span><span class="chinese">头像</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/badge-cn/"><span>Badge</span><span class="chinese">徽标数</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/calendar-cn/"><span>Calendar</span><span class="chinese">日历</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/card-cn/"><span>Card</span><span class="chinese">卡片</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/carousel-cn/"><span>Carousel</span><span class="chinese">走马灯</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/collapse-cn/"><span>Collapse</span><span class="chinese">折叠面板</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/list-cn/"><span>List</span><span class="chinese">列表</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/popover-cn/"><span>Popover</span><span class="chinese">气泡卡片</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tooltip-cn/"><span>Tooltip</span><span class="chinese">文字提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/table-cn/"><span>Table</span><span class="chinese">表格</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tabs-cn/"><span>Tabs</span><span class="chinese">标签页</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tag-cn/"><span>Tag</span><span class="chinese">标签</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/timeline-cn/"><span>Timeline</span><span class="chinese">时间轴</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tree-cn/"><span>Tree</span><span class="chinese">树形控件</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Feedback">Feedback</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/alert-cn/"><span>Alert</span><span class="chinese">警告提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/drawer-cn/"><span>Drawer</span><span class="chinese">抽屉</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/modal-cn/"><span>Modal</span><span class="chinese">对话框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/message-cn/"><span>Message</span><span class="chinese">全局提示</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/notification-cn/"><span>Notification</span><span class="chinese">通知提醒框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/progress-cn/"><span>Progress</span><span class="chinese">进度条</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/popconfirm-cn/"><span>Popconfirm</span><span class="chinese">气泡确认框</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/spin-cn/"><span>Spin</span><span class="chinese">加载中</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/skeleton-cn/"><span>Skeleton</span><span class="chinese">骨架屏</span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Other">Other</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/anchor-cn/"><span>Anchor</span><span class="chinese">锚点</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/back-top-cn/"><span>BackTop</span><span class="chinese">回到顶部</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/divider-cn/"><span>Divider</span><span class="chinese">分割线</span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/locale-provider-cn/"><span>LocaleProvider</span><span class="chinese">国际化</span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20"><article class="markdown"><h1>FAQ<a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/react/faq.zh-CN.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></h1><section class="markdown"><p>有问题请先问 React：<a href="https://reactfaq.site">https://reactfaq.site</a> 。</p></section><div class="toc-affix"><div class=""><ul class="toc"><li><a class="bisheng-toc-h2" href="#错误和警告" title="错误和警告">错误和警告</a></li></ul></div></div><section class="markdown"><h3 id="你们会提供-Vue-版本的-Ant-Design-吗？"><span>你们会提供 Vue 版本的 Ant Design 吗？</span><a href="#你们会提供-Vue-版本的-Ant-Design-吗？" class="anchor">#</a></h3><p>不，但是 <a href="https://github.com/ant-design/ant-design/blob/master/LICENSE">ant-design 基于 MIT 协议开源</a>，所以你可以尝试用 ant-design 的<a href="https://github.com/ant-design/ant-design/tree/master/style">样式</a>去实现一套，例如：<a href="https://github.com/vueComponent/ant-design-vue">ant-design-vue</a> <a href="https://github.com/FE-Driver/vue-beauty">vue-beauty</a> 或者 <a href="https://github.com/zzuu666/antue">antue</a>。</p><h3 id="你们会提供-Sass/Stylus-等格式的样式文件吗？"><span>你们会提供 Sass/Stylus 等格式的样式文件吗？</span><a href="#你们会提供-Sass/Stylus-等格式的样式文件吗？" class="anchor">#</a></h3><p>不。事实上你可以使用工具（请自行 Google）将 Less 转换成 Sass/Stylus 等。</p><h3 id="当我点击-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-内的另一个-popup-组件时它会消失，如何解决？"><span>当我点击 <code>Select Dropdown DatePicker TimePicker Popover Popconfirm</code> 内的另一个 popup 组件时它会消失，如何解决？</span><a href="#当我点击-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-内的另一个-popup-组件时它会消失，如何解决？" class="anchor">#</a></h3><p>使用 <code>&lt;Select getPopupContainer={trigger =&gt; trigger.parentNode}&gt;</code> 来在 Popover 中渲染组件，或者使用其他的 getXxxxContainer 参数。</p><p><a href="https://ant.design/components/select/#Select-props">https://ant.design/components/select/#Select-props</a></p><p>相关 issue：<a href="https://github.com/ant-design/ant-design/issues/3487">#3487</a> <a href="https://github.com/ant-design/ant-design/issues/3438">#3438</a></p><h3 id="Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-会跟随滚动条上下移动？"><span><code>Select Dropdown DatePicker TimePicker Popover Popconfirm</code> 会跟随滚动条上下移动？</span><a href="#Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-会跟随滚动条上下移动？" class="anchor">#</a></h3><p>使用 <code>&lt;Select getPopupContainer={trigger =&gt; trigger.parentNode}&gt;</code> 来将组件渲染到滚动区域内，或者使用其他的 getXxxxContainer 参数。</p><p><a href="https://ant.design/components/select/#Select-props">https://ant.design/components/select/#Select-props</a></p><p>相关 issue：<a href="https://github.com/ant-design/ant-design/issues/3487">#3487</a> <a href="https://github.com/ant-design/ant-design/issues/3438">#3438</a></p><h3 id="如何修改-Ant-Design-的默认主题？"><span>如何修改 Ant Design 的默认主题？</span><a href="#如何修改-Ant-Design-的默认主题？" class="anchor">#</a></h3><p>参考：<a href="https://ant.design/docs/react/customize-theme">https://ant.design/docs/react/customize-theme</a> 。</p><h3 id="你们会提供其他主题吗？"><span>你们会提供其他主题吗？</span><a href="#你们会提供其他主题吗？" class="anchor">#</a></h3><p>不，我们遵守 Ant Design 设计规范。<a href="https://github.com/ant-design/ant-design/issues/1241">https://github.com/ant-design/ant-design/issues/1241</a> 。</p><h3 id="如何修改-Ant-Design-组件的默认样式？"><span>如何修改 Ant Design 组件的默认样式？</span><a href="#如何修改-Ant-Design-组件的默认样式？" class="anchor">#</a></h3><p>你可以覆盖它们的样式，但是我们不推荐这么做。antd 是一系列 React 组件，但同样是一套设计规范。</p><h3 id="我只想使用-Menu/Button-等，但似乎我必须-import-整个-antd-和它的样式文件。"><span>我只想使用 <code>Menu</code>/<code>Button</code> 等，但似乎我必须 import 整个 antd 和它的样式文件。</span><a href="#我只想使用-Menu/Button-等，但似乎我必须-import-整个-antd-和它的样式文件。" class="anchor">#</a></h3><p>试试 <a href="https://github.com/ant-design/babel-plugin-import">babel-plugin-import</a>，或者用下面这种方式来按需加载：</p><pre class="language-jsx"><code><span class="token keyword">import</span> Menu <span class="token keyword">from</span> <span class="token string">'antd/lib/menu'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'antd/lib/button/style/css'</span><span class="token punctuation">;</span></code></pre><p>或者（ES6 支持的 tree shaking 方式）：</p><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Menu<span class="token punctuation">,</span> Breadcrumb<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span></code></pre><h3 id="如何配置-webpack-以优化-momentjs-的打包大小？"><span>如何配置 webpack 以优化 momentjs 的打包大小？</span><a href="#如何配置-webpack-以优化-momentjs-的打包大小？" class="anchor">#</a></h3><p>参考：<a href="https://github.com/jmblog/how-to-optimize-momentjs-with-webpack">https://github.com/jmblog/how-to-optimize-momentjs-with-webpack</a> 。</p><h3 id="当我动态改变-defaultValue-的时候它并没有生效。"><span>当我动态改变 <code>defaultValue</code> 的时候它并没有生效。</span><a href="#当我动态改变-defaultValue-的时候它并没有生效。" class="anchor">#</a></h3><p><code>Input</code>/<code>Select</code> 等的 <code>defaultXxxx</code>（例如 <code>defaultValue</code>）只有在第一次渲染的时候有效，这是 React 的规范，请阅读 <a href="https://reactjs.org/docs/forms.html#controlled-components">React 的文档</a>。</p><h3 id="当我设置了-Input/Select-等的-value-时它就无法修改了。"><span>当我设置了 <code>Input</code>/<code>Select</code> 等的 <code>value</code> 时它就无法修改了。</span><a href="#当我设置了-Input/Select-等的-value-时它就无法修改了。" class="anchor">#</a></h3><p>尝试使用 <code>defaultValue</code> 或 <code>onChange</code> 来改变 <code>value</code>，请参考 <a href="https://reactjs.org/docs/forms.html#controlled-components">React 的文档</a>。</p><h3 id="antd-覆盖了我的全局样式！"><span>antd 覆盖了我的全局样式！</span><a href="#antd-覆盖了我的全局样式！" class="anchor">#</a></h3><p>是的，antd 在设计的时候就是用来开发一个完整的应用的，为了方便，我们覆盖了一些全局样式，现在还不能移除，想要了解更多请追踪这个 issue：<a href="https://github.com/ant-design/ant-design/issues/4331">https://github.com/ant-design/ant-design/issues/4331</a> ，或者参考这个教程 <a href="docs/react/customize-theme-cn#How-to-avoid-modifying-global-styles-?">How to avoid modifying global styles?</a></p><h3 id="我没法安装-antd-和-antd-的依赖，顺便提一句，我在中国大陆。"><span>我没法安装 <code>antd</code> 和 <code>antd</code> 的依赖，顺便提一句，我在中国大陆。</span><a href="#我没法安装-antd-和-antd-的依赖，顺便提一句，我在中国大陆。" class="anchor">#</a></h3><p>那啥，试试 <a href="http://npm.taobao.org/">cnpm</a>。</p><h3 id="我在-package.json-里将-dependencies.antd-添加到了-git-repository-中，但是没有用。"><span>我在 package.json 里将 <code>dependencies.antd</code> 添加到了 git repository 中，但是没有用。</span><a href="#我在-package.json-里将-dependencies.antd-添加到了-git-repository-中，但是没有用。" class="anchor">#</a></h3><p>当然没用了，请使用 npm 安装 <code>antd</code>。</p><h3 id="message-和-notification-是小写的，但是其他的组件都是首字母大写的，这是手滑吗？"><span><code>message</code> 和 <code>notification</code> 是小写的，但是其他的组件都是首字母大写的，这是手滑吗？</span><a href="#message-和-notification-是小写的，但是其他的组件都是首字母大写的，这是手滑吗？" class="anchor">#</a></h3><p>不，因为 <code>message</code> 是一个函数，而不是一个 React 组件。</p><h3 id="antd-在移动端体验不佳。"><span><code>antd</code> 在移动端体验不佳。</span><a href="#antd-在移动端体验不佳。" class="anchor">#</a></h3><p>请浏览 <a href="http://mobile.ant.design">And Design Mobile</a> 以了解详情，<code>antd</code> 并非针对移动端设计。你可以试试 <a href="https://github.com/react-component/">react-component</a>，其中带有 &#x27;m-&#x27; &#x27;rn-&#x27; 前缀的库是为移动端设计的。</p><h3 id="antd-会像-React-那样提供单文件引入吗？"><span><code>antd</code> 会像 <code>React</code> 那样提供单文件引入吗？</span><a href="#antd-会像-React-那样提供单文件引入吗？" class="anchor">#</a></h3><p>是的，<a href="https://ant.design/docs/react/install?locale=en-US#Import-in-Browser">你可以用 script 标签引入</a>。但是我们推荐使用 <code>npm</code> 来引入 <code>antd</code>，这样维护起来更简单方便。</p><h3 id="在我的网络环境下没法获取到-icon-文件。"><span>在我的网络环境下没法获取到 <code>icon</code> 文件。</span><a href="#在我的网络环境下没法获取到-icon-文件。" class="anchor">#</a></h3><p>你应该自行部署 iconfont 文件到你的网络上，参考这个<a href="https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont">例子</a>。 <a href="https://github.com/ant-design/ant-design/issues/1070">#1070</a></p><p>在 3.9.x 版本后，<a href="/components/icon-cn/#svg-icons">我们会使用 svg 图标</a>，你就不用担心本地部署 iconfont 的问题了！</p><h3 id="如何拓展-antd-的组件？"><span>如何拓展 antd 的组件？</span><a href="#如何拓展-antd-的组件？" class="anchor">#</a></h3><p>如果你需要一些 antd 没有包含的功能，你可以尝试通过 <a href="https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775">HOC</a> 拓展 antd 的组件。 <a href="https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.eeu8q01s1">更多</a></p><h3 id="如何正确的拼写-Ant-Design？"><span>如何正确的拼写 Ant Design？</span><a href="#如何正确的拼写-Ant-Design？" class="anchor">#</a></h3><ul><li><p>✅ <strong>Ant Design</strong>：用空格分隔的首字母大写单词，指代设计语言</p></li><li><p>✅ <strong>antd</strong>：全小写，指代 React UI 组件库</p></li></ul><p>下面是一些典型的错误例子：</p><ul><li><p>❌ AntD</p></li><li><p>❌ antD</p></li><li><p>❌ Antd</p></li><li><p>❌ ant design</p></li><li><p>❌ AntDesign</p></li><li><p>❌ antdesign</p></li><li><p>❌ Antdesign</p></li></ul><h3 id="你们有接受捐助的渠道吗，比如支付宝或者微信支付？"><span>你们有接受捐助的渠道吗，比如支付宝或者微信支付？</span><a href="#你们有接受捐助的渠道吗，比如支付宝或者微信支付？" class="anchor">#</a></h3><p>还没有。</p><h3 id="为什么？"><span>为什么？</span><a href="#为什么？" class="anchor">#</a></h3><p>马爸爸会付给我们钱。</p><hr/><h2 id="错误和警告"><span>错误和警告</span><a href="#错误和警告" class="anchor">#</a></h2><p>这里是一些你在使用 antd 的过程中可能会遇到的错误和警告，但是其中一些并不是 antd 的 bug。</p><h3 id="Adjacent-JSX-elements-must-be-wrapped-in-an-enclosing-tag"><span>Adjacent JSX elements must be wrapped in an enclosing tag</span><a href="#Adjacent-JSX-elements-must-be-wrapped-in-an-enclosing-tag" class="anchor">#</a></h3><p>这里有一篇<a href="http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer">来自 StackOverflow 的回答</a>，另外请阅读 <a href="http://facebook.github.io/react/docs/displaying-data.html#components-are-just-like-functions">React 的文档</a>。</p><h3 id="React.createElement:-type-should-not-be-null,-undefined,-boolean,-or-number.-It-should-be-a-string-(for-DOM-elements)-or-a-ReactClass-(for-composite-components)"><span>React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)</span><a href="#React.createElement:-type-should-not-be-null,-undefined,-boolean,-or-number.-It-should-be-a-string-(for-DOM-elements)-or-a-ReactClass-(for-composite-components)" class="anchor">#</a></h3><p>请确保你正确引入了 <code>antd</code> 的组件。参考 <code>antd</code> 相应组件的文档，注意你代码中的 typo。</p><h3 id="rm-is-not-recognized-as-an-internal-or-external-command"><span>rm is not recognized as an internal or external command</span><a href="#rm-is-not-recognized-as-an-internal-or-external-command" class="anchor">#</a></h3><p>请阅读这个 <a href="https://github.com/ant-design/ant-design/issues/650#issuecomment-164966511">issue</a>，或者试试 Linux/Unix。</p><h3 id="Failed-propType:-Invalid-prop-AAA-of-type-BBB-supplied-to-CCC,-expected-DDD.-Check-the-render-method-of-EEE."><span>Failed propType: Invalid prop <code>AAA</code> of type <code>BBB</code> supplied to <code>CCC</code>, expected <code>DDD</code>. Check the render method of <code>EEE</code>.</span><a href="#Failed-propType:-Invalid-prop-AAA-of-type-BBB-supplied-to-CCC,-expected-DDD.-Check-the-render-method-of-EEE." class="anchor">#</a></h3><p>请阅读你正在使用版本的 <code>antd</code> 的文档，确保你传递给 <code>antd</code> 组件的参数类型正确。</p><h3 id="Unknown-option:-xxx/package.json.presets"><span>Unknown option: xxx/package.json.presets</span><a href="#Unknown-option:-xxx/package.json.presets" class="anchor">#</a></h3><p>这里有一篇<a href="http://stackoverflow.com/questions/33685365/unknown-option-babelrc-presets">来自 StackOverflow 的回答</a>可以参考。</p><h3 id="Invariant-Violation:-findComponentRoot(...):-Unable-to-find-element."><span>Invariant Violation: findComponentRoot(...): Unable to find element.</span><a href="#Invariant-Violation:-findComponentRoot(...):-Unable-to-find-element." class="anchor">#</a></h3><p>你或许引入了 React 两次。如果你使用 webpack，请将 React &amp; ReactDOM 设置为 external，参见：<a href="https://github.com/ant-design/ant-design/issues/525">#525</a>。如果你使用其他工具（browserify 等），请阅读它们的文档并将 React &amp; ReactDOM 设置为 external。</p></section><section class="markdown api-container"></section></article></div></div><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-lg-offset-6 ant-col-xl-19 ant-col-xl-offset-5 ant-col-xxl-20 ant-col-xxl-offset-4"><section class="prev-next-nav"><a class="prev-page" href="/docs/react/i18n-cn"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>国际化<i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a><a class="next-page" href="/docs/react/contributing-cn"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>贡献指南<i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></section></div></div></div><footer id="footer"><div class="footer-wrap"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>相关资源</span></h2><div><a href="http://pro.ant.design">Ant Design Pro</a></div><div><a href="http://mobile.ant.design">Ant Design Mobile</a></div><div><a href="http://ng.ant.design">NG-ZORRO</a><span> - </span>Ant Design of Angular</div><div><a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a></div><div><a target="_blank " href="https://github.com/websemantics/awesome-ant-design"><span>Awesome Ant Design</span></a></div><div><span class="ant-badge"><a target="_blank" rel="noopener noreferrer" href="http://kitchen.alipay.com">Kitchen</a><span> - </span><span>Sketch 工具集</span><sup data-show="true" class="ant-scroll-number ant-badge-dot" style="right:-3px;margin-top:0"></sup></span></div><div><a href="http://scaffold.ant.design">Scaffolds</a><span> - </span><span>脚手架市场</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://umijs.org/">Umi</a> - <span>React 应用开发框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">dva</a> - <span>数据流前端框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">Ant Motion</a><span> - </span><span>设计动效</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">Axure Library</a><span> - </span><span>Axure 部件库</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design">Ant UX</a><span> - </span><span>页面逻辑素材</span></div><div><a target="_blank " href="http://ant-design.gitee.io/"><span>国内镜像站点 🇨🇳</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>社区</span></h2><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/antdesign"><span>知乎专栏</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://medium.com/ant-design/">Medium</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://twitter.com/antdesignui">Twitter</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/xtech"><span>体验科技专栏</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://seeconf.alipay.com/">SEE Conf</a><span> - </span><span>蚂蚁体验科技大会</span></div><div><a target="_blank " href="/docs/spec/work-with-us"><span>加入我们</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>帮助</span></h2><div><a target="_blank " href="https://github.com/ant-design/ant-design">GitHub</a></div><div><a href="/changelog"><span>更新记录</span></a></div><div><a target="_blank " href="https://www.yuque.com/ant-design/course"><span>Ant Design 实战教程</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="/docs/react/faq"><span>常见问题</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design"><span>在线讨论 (中文)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english"><span>在线讨论 (English)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/"><span>报告 Bug</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues"><span>讨论列表</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd"><span>StackOverflow</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd"><span>SegmentFault</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><img class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="AFX Cloud"/><span>更多产品</span></h2><div><a target="_blank" rel="noopener noreferrer" href="https://yuque.com/"><span>语雀</span></a><span> - </span><span>知识创作与分享工具</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://yunfengdie.com/"><span>云凤蝶</span></a><span> - </span><span>移动建站平台</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a><span> - </span><span>数据可视化</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a><span> - </span><span>企业级 Node 开发框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://xcloud.alipay.com/"><span>蚂蚁体验云</span></a></div><div style="margin-top:20px"><div><div style="padding:4px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:80px;height:16px;border-radius:2px;background:#1890ff"></div></div></div></div></div></div></div></div><div class="bottom-bar">Made with <span class="heart">❤</span> by<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com"><span>AFX</span></a></div></footer></div>
    </div>
    <script src="/common.js"></script>
    <script src="/index.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
    <script>
    if (!location.port) {
      // Enable Google Analytics
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-72788897-1');
    }
    </script>
    <!-- Hotjar Tracking Code for ant.design -->
    <script>
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:473408,hjsv:5};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
  </body>
</html>
